<style lang="less">
    .square_item {
        background: #fff;
        .van-col--5 {
			margin: 0 0 20px 3.3%;
        }
    }
</style>

<template>
	<van-row class="square_item">
        <van-col span="5" v-for="(item,index) in quexianLists" :key="index">
			<div :class="[item.FLAG ? cname01:'','square']" @click="quexianClick(item)">
				<!-- square active -->
				<i></i>
				<span class="text">{{ item.minName}}</span>
				<span class="txt">{{ item.allName }}</span>
				<span v-show="item.DEFECT_TYPE">
					<img 
					class="histroy"
					:src="item.type==0?listLeftImg[0]:
					item.type==1?listLeftImg[1]:
					item.type==2?listLeftImg[2]:
					item.type==3?listLeftImg[3]:
					item.type==4?listLeftImg[4]:
					item.type==5?listLeftImg[5]:
					item.type==6?listLeftImg[6]:
					item.type==7?listLeftImg[7]:listLeftImg[7]">
				</span>
				<!-- <img :class="item.histroy" src="../assets/img/changguixunshi/icon_histroy.png" alt=""> -->
            </div>
        </van-col>
	</van-row>
</template>

<script>
import { 
    Row,
    Col
} from 'vant'

import { callData } from '../axios/axios'
export default {
    components: {
        [Row.name]: Row,
        [Col.name]: Col
	},
	props: {
		listLeftImg:{
			type: Array,
			default () {
				return []
			}
		},
		type_arr:{
			type: Object //Array
		}
    },
    data(){
		return {
			quexianLists:[],
			cname01: 'active',	//选中样式
			histroy: 'histroy'	//有列表数据的样式
		}
    },
    methods: {
		// 点击事件
		quexianClick(data){
			this.$emit('quexianClick',data)
		},
		// 数据回显
		getListData(){
			this.quexianList = [
				{index: 0, minName:'基', allName:'基础',FLAG:false},
				{index: 1, minName:'杆', allName:'杆塔',FLAG:false},
				{index: 2, minName:'导', allName:'导地线',FLAG:false},
				{index: 3, minName:'绝', allName:'绝缘子',FLAG:false},
				{index: 4, minName:'金', allName:'金具',FLAG:false},
				{index: 5, minName:'接', allName:'接地装置',FLAG:false},
				{index: 6, minName:'通', allName:'通道环境',FLAG:false},
				{index: 7, minName:'附', allName:'附属设施',FLAG:false}
			]
		},
		// 获取缺陷
		getQXcgxs(){
			var _this = this;
			_this.getListData();
			var param = {};
			param.towerTaskId = this.$route.query.towerTaskId;
			param.towerId = this.$route.query.towerId;
			callData('/xsTaskServer/ZcXsTowerTask/getPictures','get', param).then(res=>{
				var hisData = res.data.qx;//动态加载历史图标
				var styleData = res.data.check_defect;//动态加载样式
				if(hisData){
					hisData.forEach((item,index) => {
						_this.quexianList[item.DEFECT_TYPE].DEFECT_TYPE= item.DEFECT_TYPE
					})
				}
				// 动态加载选中样式
				if(styleData){
					styleData.forEach((item,index) => {
						_this.quexianList[item.FLAG].FLAG= item.FLAG
						if(styleData.index == styleData.item){
							_this.quexianList[item.FLAG].FLAG = true
						}
					})
				}
				_this.quexianLists = _this.quexianList;
			})
		},
		getQXtsxs(){
			var _this = this;
			_this.getListData();
			var param = {};
			param.towerTaskId = this.$route.query.towerTaskId;
			param.towerId = this.$route.query.towerId;
			param.cmTowerId = this.$route.query.cmTowerId;
			callData('/tsxstaskServer/TsXsTowerTask/findTsXsPicture','get', param).then(res=>{
				var hisData = res.data.qx;//动态加载历史图标
				var styleData = res.data.check_defect;//动态加载样式
				if(hisData){
					hisData.forEach((item,index) => {
						_this.quexianList[item.DEFECT_TYPE].DEFECT_TYPE= item.DEFECT_TYPE
					})
				}
				// 动态加载选中样式
				if(styleData){
					styleData.forEach((item,index) => {
						_this.quexianList[item.FLAG].FLAG= item.FLAG
						if(styleData.index == styleData.item){
							_this.quexianList[item.FLAG].FLAG = true
						}
					})
				}
				_this.quexianLists = _this.quexianList;
			})
		},
		getQXxljx(){
			var _this = this;
			_this.getListData();
			var param = {};
			param.towerTaskId = this.$route.query.towerTaskId;
			param.towerId = this.$route.query.towerId;
			param.cmTowerId = this.$route.query.cmTowerId;
			callData('/jxtaskServer/JxTowerTask/findJxPicture','get', param).then(res=>{
				var hisData = res.data.qx;//动态加载历史图标
				var styleData = res.data.check_defect;//动态加载样式
				if(hisData){
					hisData.forEach((item,index) => {
						_this.quexianList[item.DEFECT_TYPE].DEFECT_TYPE= item.DEFECT_TYPE
					})
				}
				// 动态加载选中样式
				if(styleData){
					styleData.forEach((item,index) => {
						_this.quexianList[item.FLAG].FLAG= item.FLAG
						if(styleData.index == styleData.item){
							_this.quexianList[item.FLAG].FLAG = true
						}
					})
				}
				_this.quexianLists = _this.quexianList;
			})
		},
		getQXbdzs(){
			var _this = this;
			_this.getListData();
			var param = {};
			param.towerTaskId = this.$route.query.towerTaskId;
			param.towerId = this.$route.query.towerId;
			callData('/zsTaskServer/ZsBdTowerTask/getPictures','get', param).then(res=>{
				var hisData = res.data.qx;//动态加载历史图标
				var styleData = res.data.check_defect;//动态加载样式
				if(hisData){
					hisData.forEach((item,index) => {
						_this.quexianList[item.DEFECT_TYPE].DEFECT_TYPE= item.DEFECT_TYPE
					})
				}
				// 动态加载选中样式
				if(styleData){
					styleData.forEach((item,index) => {
						_this.quexianList[item.FLAG].FLAG= item.FLAG
						if(styleData.index == styleData.item){
							_this.quexianList[item.FLAG].FLAG = true
						}
					})
				}
				_this.quexianLists = _this.quexianList;
			})
		}
    },
	mounted(){
		
	},
	created(){
		if(this.$route.query.index==0){
			this.getQXcgxs()
		}
		else if(this.$route.query.index==1){
			this.getQXtsxs()
		}
		else if(this.$route.query.index==2){
			this.getQXxljx()
		}
		else if(this.$route.query.index==3){
			this.getQXbdzs()
		}
	}
}

</script>